<template>
<div>
  <h1>{{ title }}</h1>
<!--  第三步 子组件接收传递过来的属性值-->
  <h1>{{ MyTitle }}</h1>
  <hr>
  <h2> {{ test1 }}</h2>
  <button>这是一个按钮</button>
  <hr>
  <h3>{{ name }} &nbsp;&nbsp; {{age}}</h3>
</div>
</template>

<!--  练习：父组件到子组件传参  -->
<script>
export default {
  name: "Header",
  //当前组件声明的属性,调用者可以设置属性
  //props是固定的写法，属性的名称可以自定义
  //[]是一个数组,可以声明很多属性
  // props:["MyTitle", "test1"],   //第一步： 子组件声明了一个属性 自己并不赋值

  props:{
    MyTitle:{
      type:String,  //属性的类型
      required:false,  //是否为必填的属性
      default:"默认的标题",  //如果设置属性为非必填写 可以设置默认值
    },
    name:{
      type:String
    },
    age:{
      type:Number
    }
  },


  data(){
    return{
      title: "header页面头"
    }
  }
}
</script>

<style scoped>

</style>
